import React from 'react';
import { inject, observer } from 'mobx-react';
import * as mobx from 'mobx';
import { Button, Icon, Row, Col } from 'antd';
import { WeaLocaleProvider, WeaDialog, WeaRightMenu, WeaMoreButton, WeaFormItem, WeaSelect, WeaInput, WeaBrowser, WeaUpload } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalDeskTopStore')
@observer
class AddMenu extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.getRightMenus = this.getRightMenus.bind(this);
    }

    render() {
        const { portalDeskTopStore } = this.props;
        const { add_state, setAddState } = portalDeskTopStore;
        const { visible, id, menutype, menuname, menuicon, url, unreadapiaddr, replaceData } = add_state;

        const colProps = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
        };

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@v8c03y`}
              title={`${id ? getLabel(82178, '编辑应用') : getLabel(387142, '添加应用')}`}
              visible={visible}
              icon="icon-coms-portal"
              iconBgcolor="#1a57a0"
              hasScroll={true}
              style={{ width: 700 }}
              buttons={this.getButtons()}
              onCancel={() => setAddState({ visible: false })}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@l5jxg1`} datas={this.getRightMenus()}>
                    <div className="e9desktop-menu-add">
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4gxgm7`} label={getLabel(385808, '菜单地址')} {...colProps}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7ri69s`} gutter={8}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vkwq3x`} span={8}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@m418jk`}
                                      value={menutype}
                                      options={[
                                            { key: '1', selected: true, showname: getLabel(33496, '系统菜单') },
                                            { key: '2', selected: false, showname: getLabel(385809, '自定义URL') },
                                        ]}
                                      onChange={value => setAddState({ menutype: value })}
                                    />
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ccu1pl`} span={16}>
                                    {menutype == '2' ? (
                                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@1hi5mg`}
                                              value={url}
                                              viewAttr={3}
                                              onChange={
                                                    (value) => {
                                                        let url = value;
                                                        if (value.indexOf('www.') == 0) url = `http://${url}`;
                                                        setAddState({ url });
                                                    }
                                                }
                                              helpfulTip={getLabel('386567', '外部地址，请在地址前加上http://或https://')}
                                            />
                                        ) : (
                                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@1y764w`}
                                              title={getLabel(33496, '系统菜单')}
                                              type={'portalmenu'}
                                              tabs={[
                                                    { name: getLabel(33675, '前端菜单'), key: '1', dataParams: { sourcetype: '1' }, conditionDataParams: { sourcetype: '1' } },
                                                ]}
                                              viewAttr={3}
                                              replaceDatas={mobx.toJS(replaceData)}
                                              onChange={(id, name, data) => setAddState({ menuid: id, menuname: name, replaceData: data })}
                                            />
                                        )
                                    }
                                </Col>
                            </Row>
                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@z8dgec`} label={getLabel(30828, '显示名称')} {...colProps}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@a0w59a`} value={menuname} isBase64={true} inputType={'multilang'} getCurrentLabel={menuname} viewAttr={3} onChange={(value) => { setAddState({ menuname: value }); }} />
                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6bz0ct`} label={getLabel(387148, '未读数接口地址')} {...colProps}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zbv8bg`}
                              value={unreadapiaddr}
                              onChange={value => setAddState({ unreadapiaddr: value })}
                              helpfulTip={getLabel(387149, '如需在应用图标上显示未读数，请配置未读数获取接口地址，如不配置则不显示未读数')}
                            />
                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ljbp2p`} label={getLabel(22969, '图标')} {...colProps} style={{ height: '80px', lineHeight: '80px' }}>
                            {
                                menuicon ? (
                                        <div className="e9desktop-menu-add-img-edit">
                                            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@y3rw8l`}
                                              uploadId="uploadfile"
                                              uploadUrl="/api/portal/fileupload/uploadfile"
                                              multiSelection={false}
                                              category="stirng"
                                              limitType="png,gif,jpeg,jpg,bmp"
                                              onChange={
                                                    (ids, list) => {
                                                        if (list && list.length) {
                                                            setAddState({ menuicon: list[list.length - 1].filelink });
                                                        }
                                                    }
                                                }
                                            >
                                                <img src={menuicon} alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150, '更换图标')} />
                                            </WeaUpload>
                                            <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746, '删除图标')}>
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@iskqzq`} type="cross" onClick={() => setAddState({ menuicon: '' })} />
                                            </div>
                                        </div>
                                    ) : (
                                        <div className="e9desktop-menu-add-img-add">
                                            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@piulad`}
                                              uploadId="uploadfile"
                                              uploadUrl="/api/portal/fileupload/uploadfile"
                                              multiSelection={false}
                                              category="stirng"
                                              limitType="png,gif,jpeg,jpg,bmp"
                                              onChange={
                                                    (ids, list) => {
                                                        if (list && list.length) {
                                                            setAddState({ menuicon: list[list.length - 1].filelink });
                                                        }
                                                    }
                                                }
                                            >
                                                <div className="e9desktop-menu-add-img-add-icon" title={getLabel(387151, '添加图标')}>
                                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gyl6dw`} type="plus" />
                                                </div>
                                            </WeaUpload>
                                        </div>
                                    )
                            }
                            <div className="e9desktop-menu-add-img-desc">{getLabel(387152, '（建议使用的图片大小为：120*120）')}</div>
                        </WeaFormItem>
                    </div>
                </WeaRightMenu>
            </WeaDialog>
        );
    }

    getButtons() {
        const { portalDeskTopStore } = this.props;
        const { onAddSave } = portalDeskTopStore;

        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vce273`} type="primary" onClick={onAddSave}>{getLabel(30986, '保存')}</Button>);
        btns.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@xxnvhe`} datas={this.getRightMenus()} />);
        return btns;
    }

    getRightMenus() {
        const { portalDeskTopStore } = this.props;
        const { onAddSave } = portalDeskTopStore;

        let btns = [];
        btns.push({ key: '1', icon: <i className="icon-coms-Preservation" />, content: getLabel(30986, '保存'), onClick: onAddSave });
        return btns;
    }
}

export default AddMenu;
